<template>
	<div class="h-header" v-style="{ 'background-color': website.nav.bgColor || global.darkTheme.bgColor0 }">
		<div class="h-header-wrap">
			<div class="left">
				<div class="logo-box">
					<img v-lazy="website.nav.logo || headerState.logo" alt="logo" />
				</div>
				<div class="title-box" v-style="{ color: global.darkTheme.textColor0 }">
					<span class="title" :style="`color:${website.nav.titleColor || ''}`">
						{{ website.nav.title || headerState.title  }}</span>
					<span class="sub-title" :style="`color:${website.nav.subTitleColor || ''}`">
						{{ website.nav.subTitle || headerState.subTitle}}</span>
				</div>
			</div>
			<div class="right">
				<div class="ribbon-box" v-style="{ color: global.darkTheme.textColor0 }">
					<div class="ribbon-item" v-for="(item, index) in headerState.routes" :key="item.id">
						<router-link :to="item.path" class="ribbon-item-link">
							<VSvgIcon class-name="ribbon-item-icon" :iconName="item.icon" :color="item.iconColor"
								:iconSize="item.iconSize || 1.5" />
							<div class="ribbon-item-title">
								<span>{{ item.title }}</span>
							</div>
						</router-link>
					</div>
					<div><button @click="exit" class="exit-btn">退出登录</button></div>
					<!-- 功能区 -->
				</div>
				<div class="time-performance">
					<!-- 时间和性能展示区 -->
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import VSvgIcon from "@/components/SvgIcon/VSvgIcon.vue"
import { IGlobalState } from "@/global/types"
import { IWebsite } from "@/store/types"
import { computed, inject, onMounted, ref } from "vue"
import { useRouter } from "vue-router"
import { useStore } from "vuex"
const router = useRouter()
const store = useStore()

const headerState = computed(() => store.state.home.frontHeader)

const website = computed(() => store.state.website.data as IWebsite)

const global: IGlobalState = inject("global")
const exit = () => {
	store.commit('permission/_onLogout');
}
onMounted(async () => {
	const routerActiveEl: HTMLElement = document.querySelector(".h-router-active")
	if (routerActiveEl) {
		routerActiveEl.style.backgroundColor = global.darkTheme.linkActiveBgColor
	}
})

</script>
<style scoped lang="less"></style>
